<template>
  <div class="out">
    <div class="bigTitle">我的备忘录</div>
    <div class="out_container">
      <!--  -->
      <div class="title">建站日记</div>
      <div class="message">
        <div class="comment">
          <!-- 自行输入 -->
          <!-- <textarea cols="30" rows="10"></textarea> -->
          <!-- <button @click="send">发送</button> -->
          <div ref="comment_list" class="comment_list">
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/5/3 20:12:20 星期二
              </div>
              <div class="list">根据接口文档测试post方法和get方法是否正常</div>
            </div>

            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/5/1 10:35:14 星期日
              </div>
              <div class="list">开发后台管理的文章管理页面部分</div>
            </div>
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/4/26 19:54:12
                星期二
              </div>
              <div class="list">
                规划<我的文章>页面的布局设计，将设计稿进行还原
              </div>
            </div>
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/4/23 16:24:35
                星期六
              </div>
              <div class="list">引入右下角的卡通人物，引入鼠标图案跟随</div>
            </div>
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/4/19 11:37:23
                星期二
              </div>
              <div class="list">制作登录页面和我的留言模块，美化界面</div>
            </div>
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>2022/4/17 19:27:39
                星期日
              </div>
              <div class="list">创建项目，搭建一个管理相册的私人网站</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <Clock />
  </div>
</template>

<script>
export default {
  name: "mymemo",
  data() {
    return {
      date1: "", //预先定义第一个li的时间
      date2: "", //预先定义第二个li的时间
    };
  },
  mounted() {},
  methods: {
    send() {
      // 获取元素
      var text = document.querySelector("textarea");
      var comment_list = this.$refs.comment_list; //这样获取可以保证之前的留言都还存在
      if (text.value == "") {
        alert("您没有留下任何信息");
      } else {
        // 时间格式化
        var time = this.formatDate(new Date(), "yyyy/MM/dd HH:mm:ss 星期w");
        //(1)创建元素
        var divContainer = document.createElement("div"); //创建容器包容下面三个div
        divContainer.style.border = "1px dotted rgba(163, 240, 253, 0.7)";
        divContainer.style.padding = "15px 15px";
        divContainer.style.marginBottom = "10px";
        divContainer.style.borderRadius = "25px";
        divContainer.className = "container";
        // 1.创建时间div并添加样式
        var divTime =
          `<div class="time" 
            style="margin-top: 10px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 8px;
            padding-left: 20px;
            border-radius: 15px;
            font-size: 14px;
            background-color: rgba(241, 237, 237, 0.2);">
             <i class="iconfont icon-a-bianzu14" style=" margin-right: 15px;"></i>` +
          time +
          `</div>`;
        //2创建内容div并添加样式
        var divList =
          ` <div class="list"
            style="margin-left: 30px;
            padding: 15px 20px;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 15px;
            background-color: rgba(241, 237, 237, 0.3);
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis">` +
          text.value +
          `</div>`;
        divContainer.innerHTML = divTime + divList;
        // divContainer.appendChild(divTime1, divList1, divIcon1);
        comment_list.insertBefore(divContainer, comment_list.children[0]);
        text.value = ""; //情况留言窗口数据

        //(3)删除操作开始(这个删除操作放在最外面不起作用)
        var as = document.querySelectorAll("a");
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            //点击a删除当前a所在的整个外部div（链接的爸爸的爸爸）
            //这个行(child)如何获取---this.parentNode.parentNode
            comment_list.removeChild(this.parentNode.parentNode);
          };
        }
      }
    },
    // 处理时间格式
    formatDate(time, str) {
      var obj = {
        yyyy: time.getFullYear(),
        yy: ("" + time.getFullYear()).slice(-2),
        M: time.getMonth() + 1,
        MM:
          time.getMonth() + 1 > 9
            ? (time.getMonth() + 1).toString()
            : "0" + (time.getMonth() + 1),
        d: time.getDate(),
        dd:
          time.getDate() > 9 ? time.getDate().toString() : "0" + time.getDate(),
        H: time.getHours(),
        HH:
          time.getHours() > 9
            ? time.getHours().toString()
            : "0" + time.getHours(),
        m: time.getMinutes(),
        mm: ("0" + time.getMinutes()).slice(-2),
        s: time.getSeconds(),
        ss: ("0" + time.getSeconds()).slice(-2),
        w: ["日", "一", "二", "三", "四", "五", "六"][time.getDay()],
      };
      return str.replace(/([a-z]+)/gi, function (time) {
        return obj[time];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.out {
  // position: relative;
  .bigTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 40px;
  }
  .out_container {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1000px;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 20px;
    border-radius: 20px;
    /* 设置渐变色 */
    background: linear-gradient(
      to right,
      rgba(66, 12, 12, 0.4),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2)
    );
    /* *****重点：使元素背景模糊化，backdrop-filter 是使透过该层的底部元素模糊化，值越大越模糊，注意区别于filter */
    backdrop-filter: blur(10px);
    /* filter是使该元素本身模糊化 */
    /* filter: blur(10px); */
    /* 设置上高光和左高光 */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    .title {
      font-size: 26px;
    }
    .message {
      width: 500px;
      margin-top: 10px;
      .comment {
        textarea {
          background-color: rgba(188, 226, 231, 0.3);
          border: none;
          height: 50px;
          font-size: 18px;
          border-radius: 10px;
          width: 400px;
        }
        button {
          position: relative;
          margin-left: 5px;
          border: none;
          background-color: rgba(188, 226, 231, 0.3);
          width: 50px;
          height: 30px;
          border-radius: 10px;
        }
        .comment_list {
          width: 600px;
          margin-left: -100px;
          padding: 5px 20px;
          display: flex;
          flex-direction: column;
          .container {
            border: 1px dotted rgba(163, 240, 253, 0.7);
            padding: 3px 10px;
            margin-bottom: 10px;
            border-radius: 25px;
            .time {
              margin-top: 10px;
              height: 30px;
              line-height: 30px;
              margin-bottom: 8px;
              padding-left: 20px;
              border-radius: 15px;
              font-size: 14px;
              background-color: rgba(241, 237, 237, 0.2);
              i {
                margin-right: 15px;
              }
            }
            .list {
              margin-left: 30px;
              padding: 15px 20px;
              padding-left: 20px;
              padding-right: 20px;
              border-radius: 15px;
              background-color: rgba(241, 237, 237, 0.3);
              // 单行文本显示
              overflow: hidden; /*超出部分隐藏*/
              white-space: nowrap; /*禁止换行*/
              text-overflow: ellipsis;
            }
            .icon {
              margin-left: 40px;
              margin-top: 5px;
              i {
                margin: 0 5px;
              }
              a {
                color: black;
              }
            }
          }
        }
      }
    }
  }
  /* 设置那几个球 */
  .circle1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 180px;
    left: 180px;
    background: rgba(186, 248, 227, 0.7);
    z-index: -99;
  }
  .circle2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 430px;
    left: 400px;
    background: rgba(232, 250, 201, 0.7);
    z-index: -99;
  }
  .circle3 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 250px;
    left: 1100px;
    background: rgba(149, 200, 241, 0.7);
    z-index: -99;
  }
}
</style>